/*
 * @Title: 宾馆入住-首页
 * @Created by: ycq
 */
<template>
	<view :class="showHPS?'hotel':''"  >
		<IndexHead :config='pageConfig' :bgImg='bannerBgImage' :rightIcoHandle='toSearch'></IndexHead>
		<view class="query-area" style="width: 100%;height: 650upx;border-bottom: #F6F6F6 solid 15upx ; padding-bottom: 46upx;">
			<HotelQuery />
		</view>
		<view class="typeBar">
			<HomeType :pageId='2'></HomeType>
		</view>
		<view class="hotel-list">
			<!-- <view class="list-bg"></view> -->
			<view class="hotel-item" v-for="(item,index) in hotelData" :key='index'>
				<image :src="item.img" mode="aspectFill" @click="toDetail" ></image>
				<view class="item-text" @click="toDetail" >
					<view class="item-title" >
						<text class="title-text">{{item.name}}</text>
						<view class="stars">
							<image src="/static/dengji2.png" v-for="index in item.level" :key='index' mode=""></image>
						</view>
					</view>
					<view style="width: 100%;height: 50upx;">
						<text class="fen">{{item.fen}}分</text>
						<text class="pl">{{item.pl}}评论</text>
					</view>
					<view style="width: 100%;height: 40upx;">
						<text class="address">{{item.add}}|{{item.type}}</text>
						<text class="far">{{item.far}}km</text>
					</view>
					
				</view>
			</view>
		</view>
		<HotelPriceStar v-if='showHPS' :showData='queryPrice'></HotelPriceStar>
		<FootMenu />
		<top-view></top-view>
	</view>
</template>

<script>
	import FootMenu from '@/components/footMenu.vue'
	import ShouyeOrder from '@/components/shoyeOrder.vue'
	import HotelQuery from '@/components/hotelQuery.vue'
	import HotelPriceStar from '@/components/HotelPriceStar.vue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	import HomeType from '@/components/HomeType.vue'
	export default{
		data(){
			return{
				bannerBgImage:['/static/banner.png','/static/banner.png','/static/banner.png','/static/banner.png'],
				queryPrice:'',
				queryStar:'',
				star:'星级',
				starIndex:0,
				boxIndex:0,
				lockPage:false,
				showHPS:false,
				starData:[
					{star:'豪华/五星'},
					{star:'高档/四星'},
					{star:'舒适/三星'},
					{star:'经济型/二星及以下'},
				],
				
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:true, //显示页面title
						showHeadBg:false,
						hasMenu:false,
						headHeight:350,
						pageId:'binguan',
					},
					left:{
						// img:'/static/pos-home.png' , //左侧图标
						// text:'沈阳市', //左侧文字
					},
					mid:{
						title:'宾馆' ,//页面title
						hasSearchMid:false ,//显示中间搜索框
						showAddIcon:true, //是否显示右侧icon
						rightIco:'/static/fdj-head.png'//右侧图标地址
					},
					
				},
				
				
				hotelData:[
					{
						name:'八号公寓',
						far:6.2,
						add:'浑南区',
						type:'民宿',
						prize:298,
						img:'../../../static/banner.png',
						level:4,
						fen:5.9,
						pl:95
					},
					{
						name:'海之梦主题宾馆',
						far:6.2,
						add:'浑南区',
						type:'民宿',
						prize:268,
						img:'../../../static/banner.png',
						level:1,
						fen:5.9,
						pl:95
					},
					{
						name:'海之梦主题宾馆',
						far:6.2,
						type:'火锅',
						add:'浑南区',
						prize:298,
						img:'../../../static/banner.png',
						level:3,
						fen:5.9,
						pl:95
					},
					{
						name:'跃达酒店',
						far:6.2,
						add:'浑南区',
						type:'火锅',
						prize:198,
						img:'../../../static/banner.png',
						level:2,
						fen:5.9,
						pl:95
					},
					{
						name:'八号公寓',
						far:6.2,
						add:'浑南区',
						type:'民宿',
						prize:298,
						img:'../../../static/banner.png',
						level:4,
						fen:5.9,
						pl:95
					},
					{
						name:'海之梦主题宾馆',
						far:6.2,
						add:'浑南区',
						type:'民宿',
						prize:268,
						img:'../../../static/banner.png',
						level:1,
						fen:5.9,
						pl:95
					},
					{
						name:'海之梦主题宾馆',
						far:6.2,
						type:'火锅',
						add:'浑南区',
						prize:298,
						img:'../../../static/banner.png',
						level:3,
						fen:5.9,
						pl:95
					},
					{
						name:'跃达酒店',
						far:6.2,
						add:'浑南区',
						type:'火锅',
						prize:198,
						img:'../../../static/banner.png',
						level:2,
						fen:5.9,
						pl:95
					},
				]
			}
		},
		components:{
			ShouyeOrder,
			FootMenu,
			HotelQuery,
			HotelPriceStar,
			uniIcon,
			HomeType
		},
		
		methods:{
			toSearch(){
				uni.navigateTo({
					url:'/pages/home/shearchView'
				})
			},
			toDetail(){
				uni.navigateTo({
					url:'hotelDetail',
				})
			},
			toDetailList(){
				uni.navigateTo({
					url:'hotelDetail?tolist=true',
				})
			},
			lockPageFun(){
				this.lockPage = true
				document.body.style.overflow = 'hidden'
			},
			scorllPageFun(){
				this.lockPage = false
				document.body.style.overflow = 'scroll'
			},
			showHPSArea(){
				this.showHPS = true
				// document.body.style.overflow = 'hidden'
			},
			closeHPSArea(){
				this.queryPrice = this.$store.state.hotelPrice
				this.showHPS = false
				// document.body.style.overflow = 'scroll'
				
			}
		},
		
	}
</script>
	
<style scoped>
	.hotel{
		width: 100%;
		height: 100vh;
		overflow: scroll;
		position: relative;
	}
	.mask{
		width: 100%;
		height: calc(100vh - 130upx) ;
		top: 130upx;
		position: fixed;
		z-index: 10;
		background: rgba(0,0,0,0.5);
	}
	.typeBar{
		position: sticky;
		top: calc(80upx + var(--status-bar-height));
		width: 100%;
		height: auto;
		z-index: 20;
		box-shadow: 0 -1px #fff;
		/* border-top: rgba(246,246,246,1.00) solid 15upx ; */
		/* padding-top: 24upx; */
	}
	.query-area{
		width: 100%;height: 650upx;border-bottom: #F6F6F6 solid 15upx ; padding-bottom: 46upx;
	}
	.hotel-list{
		width: 700upx;
		padding-left: 25upx;
		padding-right: 25upx;
		height: auto;
		/* margin-bottom: 120upx; */
		padding-bottom: 130upx;
		background: #F6F6F6;
		display: table;
		margin-top: 20upx;
		position: relative;
	}
	.hotel-item:nth-child(odd){
		margin-top: 20upx;
		width: 340upx;
		float: left;
	}
	.hotel-item:nth-child(even){
		margin-top: 20upx;
		width: 340upx;
		float: right;
	}
	.hotel-item:nth-child(1),.hotel-item:last-child{
		height: 452upx;
	}
	.hotel-item:nth-child(1) image,.hotel-item:last-child image{
		border-radius: 10px 10px 0 0;
		z-index: 1;
		width: 340upx;
		height: 268upx; 
	}
	.hotel-item:nth-child(1) .item-fen,.hotel-item:last-child .item-fen{
		top: 400upx;
	}
	.hotel-item{
		height: 515upx;
		position: relative;
		background: #FFFFFF;
		border-radius: 20upx;
	}
	.hotel-item image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 336upx;
	}
	.hotel-item .item-fen{
		width: 68upx;
		height: 30upx;
		background: rgba(0,0,0,0.5);
		color: #FFFFFF;
		font-size: 24upx;
		position: absolute;
		right: 0;
		text-align: center;
		top: 449upx;
		line-height: 30upx;
	}
	.item-text{
		width: 340upx;
		height: 210upx;
		float: right;
	}
	.item-title{
		width: 100%;
		margin-top: 5upx;
		height: 80upx;
	}
	.title-text{
		font-size: 32upx;
		width: 320upx;
		padding-left: 20upx;
		display: block;
		float: left;
	}
	.stars{
		float: left;
		padding-left: 20upx;
		display: flex;
		margin-top: 16upx;
		flex-direction: row;
	}
	.stars image{
		width: 17upx !important;
		margin-right: 5upx;
		height: 17upx !important;
	}
	.sc{
		float: right;
		font-size: 21upx;
		padding-top: 4upx;
		right: 20upx;
		
		position: absolute;
		z-index: 2;
		color: #666666;
	}
	.fen{
		float: left;
		margin-top: 5upx;
		font-size: 30upx;
		padding-left: 20upx;
		line-height: 40upx;
		color: #DD540A;
	}
	.sc image{
		width: 25upx !important;
		height: 25upx !important;
	}
	.far{
		width: 90upx;
		margin-left: 24upx;
		height: 40upx;
		/* margin-top: 20upx; */
		color: #999999;
		float: right;
		font-size: 26upx;
		margin-top: -6upx;
		display: block;
	}
	.address{
		float: left;
		margin-top: -6upx;
		font-size: 25upx;
		padding-left: 20upx;
		color: #666666;
	}
	.pl{
		float: left;
		margin-top: 5upx;
		line-height: 40upx;
		font-size: 25upx;
		padding-left: 20upx;
		color: #666666;
	}
	.price{
		font-size: 32upx;
		padding-left: 20upx;
		color: #0075EE;
		/* margin-top: 15upx; */
		float: left;
	}
	.buy{
		width: 100upx;
		height: 60upx;
		margin-top: 15upx;
		color: rgba(84,172,255,1.00);
		font-size: 22upx;
		text-align: center;
		padding-left: 0;
		right: 0;
		bottom: 0upx;
		line-height: 35upx;
		border-radius: 20upx;
		position: absolute;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
	}
	.buy-btn{
		width: 80upx;
		height: 35upx;
		margin-top: 15upx;
		color: rgba(84,172,255,1.00);
		font-size: 22upx;
		text-align: center;
		border: rgba(84,172,255,1.00) solid 1upx;
		line-height: 35upx;
		border-radius: 20upx;
	
	}
	.stars ul{
		float: right;
		padding: 0;
		display: flex;
		flex-direction: row;
		list-style:none;
	}
	.stars ul li{
		width: 25upx;
		height: 25upx;
		margin-top: 10upx;
		background:url(../../../static/dengji.png) no-repeat center;
		background-size: 80%;
	}
	.list-bg{
		width: 750upx;
		left: 0;
		height: 300upx;
		position: absolute;
		background: -webkit-linear-gradient(top,#FFFFFF ,rgba(246,246,246,1.00));
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(bottom,#FFFFFF ,rgba(246,246,246,1.00));
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(bottom, #FFFFFF ,rgba(246,246,246,1.00)) ;
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to bottom, #FFFFFF ,rgba(246,246,246,1.00)) ;
		/* 标准的语法 */
		z-index: 0;
	}
</style>
